<template>
  <body-index>
    <body-left title="用户中心" slot="bodyLeft">
      <template slot="main">
        <div class="container-fluid">
          <div style="padding: 20px" class="row no-gutters inlineBack round-xs">
            <!-- 头像 -->
            <div class="col-5 col-sm-4 col-md-3" style="text-align: center">
              <div style="display: inline-block">
                <el-avatar :size="60" :src="user.info.avatar"></el-avatar>
              </div>
              <br />
              <div
                v-if="isSelf"
                style="display: inline-block; text-align: center"
              >
                <span style="font-size: 14px"
                  >更换头像<i class="el-icon-refresh"></i
                ></span>
              </div>

              <div v-else style="display: inline-block; text-align: center">
                <span id="focus" @click="focusWith(user.info.id)"
                  >&nbsp;{{
                    isFans && isFocus
                      ? " 互相关注 "
                      : isFans
                      ? " 已关注 "
                      : isFocus
                      ? " 回 关 "
                      : " 关 注 "
                  }}
                  &nbsp;</span
                >
              </div>
            </div>

            <!-- 具体信息 -->
            <div class="col-7 col-sm-8 col-md-9">
              <div class="row no-gutters">
                <!-- 昵称 -->
                <div class="col-12">
                  <strong>{{ user.info.nick }} </strong>
                  <span v-if="user.isAdmin" id="admin">
                    &nbsp;管理员&nbsp;</span
                  >

                  <!-- 性别 -->
                  <font
                    style="font-size: 17px"
                    :color="user.info.sex === '男' ? 'blue' : 'pink'"
                  >
                    <i
                      style="font-weight: bolder"
                      :class="
                        user.info.sex === '男'
                          ? 'el-icon-male'
                          : 'el-icon-female'
                      "
                    ></i>
                  </font>
                </div>

                <!-- 加入社区时间 -->
                <div class="col-12">
                  <span>{{ user.info.creatTime }} 加入社区</span>
                </div>

                <!-- 个人简介 -->
                <div class="col-12">
                  <span>个人简介：</span>
                  <span>{{ user.info.desc }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                </div>

                <!-- 修改资料 -->
                <div v-if="isSelf" class="col-12">
                  <router-link
                    :to="{
                      name: 'UpdateSelf',
                    }"
                    ><span style="color: rgba(255, 255, 255, 0.8)"
                      ><i class="el-icon-edit"></i>修改资料</span
                    ></router-link
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="container-fluid">
          <!-- 用户关联列表 -->
          <div class="row default padding-20">
            <div
              v-for="(item, index) in lineList"
              :key="index"
              class="col-6 col-sm-3 col-md-3"
              style="text-align: center; cursor: pointer"
            >
              <div @click="jumpList(item.type, item.to)">
                <span id="span-num">{{ item.list.length }} </span>
                <span id="span-desc">{{ item.content }}</span>
              </div>
            </div>
          </div>
        </div>

        <router-view class="padding-20"></router-view>
      </template>
    </body-left>

    <!-- <body-right slot="bodyRight">
      <template slot="first">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <span>{{ isSelf ? "我" : "Ta" }}的关注</span>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in focus"
              :key="item.info.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'User',
                  query: {
                    id: item.info.id + '',
                  },
                }"
              >
                <div class="body-right">
                  <div style="display: inline-block">
                    <el-avatar :size="25" :src="item.info.avatar"></el-avatar>
                  </div>
                  <span
                    style="position: relative; bottom: 5px"
                    id="body-right-span"
                  >
                    {{ item.info.nick }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>

      <template slot="second">
        <div class="container-fluid">
          <div class="row">
            <div
              class="col-12 border-bottom"
              style="height: 50px; line-height: 50px"
            >
              <span>{{ isSelf ? "我" : "Ta" }}的粉丝</span>
            </div>

            <div
              class="col-12 body-right"
              v-for="(item, index) in fans"
              :key="item.info.id"
            >
              <router-link
                v-if="index <= 4"
                :to="{
                  name: 'User',
                  query: {
                    id: item.info.id + '',
                  },
                }"
              >
                <div class="body-right">
                  <div style="display: inline-block">
                    <el-avatar :size="25" :src="item.info.avatar"></el-avatar>
                  </div>
                  <span
                    style="position: relative; bottom: 5px"
                    id="body-right-span"
                  >
                    {{ item.info.nick }}</span
                  >
                </div>
              </router-link>
            </div>
          </div>
        </div>
      </template>
    </body-right> -->
  </body-index>
</template>

<script>
import BodyIndex from "../../pages/body/BodyIndex.vue";
import BodyLeft from "../../pages/body/BodyLeft.vue";
import BodyRight from "../../pages/body/BodyRight.vue";
import { fake } from "../../assets/fake";
export default {
  components: { BodyLeft, BodyIndex, BodyRight },
  data() {
    return {
      lineList: [
        {
          icon: "el-icon-user",
          content: "关注",
          list: [],
          to: "LineUserList",
          type: "1",
        },
        {
          icon: "el-icon-attract",
          content: "粉丝",
          list: [],
          to: "LineUserList",
          type: "2",
        },
        {
          icon: "el-icon-star-off",
          content: "收藏",
          list: [],
          to: "UserInfo",
          type: "2",
        },
        {
          icon: "el-icon-view",
          content: "文章",
          list: [],
          to: "UserInfo",
          type: "1",
        },
      ],
      loading: false,
      user: null,
      isSelf: false,
      isAdmin: false,
      focus: [],
      fans: [],
      isFans: false,
      isFocus: false,
    };
  },
  watch: {
    $route(to, from) {
      const whitePath = ["/User/UserInfo", "/User/LineUserList", "/User"];
      if (whitePath.indexOf(to.path) !== -1) {
        if (to.query.id !== from.query.id) {
          let _this = this;
          let param = this.$route.query;
          this.user = fake.methods.getUser(param.id);
          let line = this.user.line;
          this.isAdmin = fake.self.isAdmin;
          this.isSelf = param.id === fake.self.info.id;
          this.fans = [];
          this.focus = [];
          this.jumpList("1", "UserInfo");
          this.lineList.forEach((value, index) => {
            if (value.content === line[index].content) {
              value.list = line[index].list;
            }
          });
          this.user.line.forEach((value) => {
            if (value.content === "关注") {
              _this.isFocus = value.list.indexOf(fake.self.info.id) !== -1;
              value.list.forEach((focusValue) => {
                _this.focus.push(fake.methods.getUser(focusValue));
              });
            }
            if (value.content === "粉丝") {
              _this.isFans = value.list.indexOf(fake.self.info.id) !== -1;
              value.list.forEach((fansValue) => {
                _this.fans.push(fake.methods.getUser(fansValue));
              });
            }
          });
        }
      }
    },
  },
  methods: {
    jumpList(type, to) {
      let _this = this;
      this.$router.push({
        name: to,
        query: {
          id: _this.user.info.id,
          type: type,
        },
      });
    },
    focusWith(id) {
      let _this = this;
      fake.methods.focusWith(!this.isFans, fake.self.info.id, id);
      this.isFans = !this.isFans;
      _this.focus = [];
      _this.fans = [];
      this.user.line.forEach((value) => {
        if (value.content === "关注") {
          _this.isFocus = value.list.indexOf(fake.self.info.id) !== -1;
          value.list.forEach((focusValue) => {
            _this.focus.push(fake.methods.getUser(focusValue));
          });
        }
        if (value.content === "粉丝") {
          _this.isFans = value.list.indexOf(fake.self.info.id) !== -1;
          value.list.forEach((fansValue) => {
            _this.fans.push(fake.methods.getUser(fansValue));
          });
        }
      });
    },
    flushPage() {
      let _this = this;
      this.jumpList("1", "UserInfo");
      let line = this.user.line;
      this.fans = [];
      this.focus = [];
      this.lineList.forEach((value, index) => {
        if (value.content === line[index].content) {
          value.list = line[index].list;
        }
      });
      this.user.line.forEach((value) => {
        if (value.content === "关注") {
          _this.isFocus = value.list.indexOf(fake.self.info.id) !== -1;
          value.list.forEach((focusValue) => {
            _this.focus.push(fake.methods.getUser(focusValue));
          });
        }
        if (value.content === "粉丝") {
          _this.isFans = value.list.indexOf(fake.self.info.id) !== -1;
          value.list.forEach((fansValue) => {
            _this.fans.push(fake.methods.getUser(fansValue));
          });
        }
      });
    },
  },
  mounted() {
    this.flushPage();
  },
  beforeMount() {
    let param = this.$route.query;
    this.user = fake.methods.getUser(param.id);
    this.isAdmin = fake.self.isAdmin;
    this.isSelf = param.id === fake.self.info.id;
  },
};
</script>

<style scoped>
span {
  font-size: 13px;
  color: rgba(2, 2, 2, 0.489);
}
.inlineBack {
  background: linear-gradient(
    45deg,
    #f7a204 0%,
    #f5b323 20%,
    #f7eb15 50%,
    #f1b503 100%
  );
  background-size: 400%;
  background-position: 0% 100%;
  animation: gradient1 7.5s ease-in-out infinite;
}
@keyframes gradient1 {
  50% {
    background-position: 100% 0;
  }
}
a {
  color: rgba(0, 0, 0, 0.658);
  transition: all 0.3s;
}
a:hover {
  color: rgb(0, 0, 0);
  transition: all 0.3s;
}
#body-right-span {
  font-size: 14px;
  padding: 15px auto;
}
.body-right {
  margin-top: 5px;
}
#focus {
  color: rgba(255, 255, 255, 0.814);
  border: 1px solid white;
  border-radius: 10px;
  transition: all 0.2s;
}
#focus:hover {
  cursor: pointer;
  color: #f7a204;
  font-weight: bolder;
  border: 1px solid white;
  background-color: white;
  border-radius: 10px;
  transition: all 0.2s;
}
#admin {
  cursor: pointer;
  color: white;
  font-weight: bolder;
  border: 1px solid green;
  background-color: green;
  border-radius: 10px;
  transition: all 0.2s;
}
.index {
  background-color: skyblue;
}
strong {
  font-size: 20px;
}
span {
  font-size: 13px;
  color: rgba(2, 2, 2, 0.489);
}
#span-desc {
  color: #555666;
  font-size: 14px;
}
#span-num {
  font-weight: bolder;
  font-size: 20px;
  color: black;
}
.default {
  margin-top: 10px;
  background-color: white;
}
.hover {
  background-color: white;
  transition: all 0.5s;
}
.hover:hover {
  background-color: rgb(245, 245, 245);
  transition: all 0.5s;
}
</style>
